<template>
  <div>
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="账号与安全"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <div slot="header">
            <b>账号信息</b>
          </div>
          <van-cell title="手机号">
            <template #default>
              {{ user.phone }}
              <span style="float: right;"></span>
            </template>
          </van-cell>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <div slot="header">
            <b>账户安全</b>
          </div>
          <van-cell title="设置交易密码" @click="setTransactionPassword">
            <template #default>
              <span style="float: right;">> </span>
            </template>
          </van-cell>
          <van-cell title="注销账号" @click="zhuxiao">
            <template #default>
              <span style="float: right;">> </span>
            </template>
          </van-cell>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>import { Toast } from "vant";
import axios from "axios";

export default {
  data() {
    return {
      product: {},
      user: {},
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.push('/seting');
    },
    // 设置交易密码
    setTransactionPassword() {
      // 在这里实现设置交易密码的逻辑，例如跳转到设置交易密码页面
      this.$router.push('/setPayPassword');
    },
    modifyTransactionPassword() {
      // 在这里实现修改交易密码的逻辑，例如跳转到修改交易密码页面
      this.$router.push('/modify-transaction-password');
    },
    zhuxiao() {
      this.$confirm('确认注销账号？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 在这里实现注销账号的逻辑，例如跳转到注销账号页面
        axios.post(`http://113.44.137.179:6001/user/user/deleteUser?id=${this.user.id}`).then(res => {
          if (res.data.code == 1) {
            this.$message({
              type: 'success',
              message: '注销成功'
            });
            this.$router.push('/');
          } else {
            this.$message.error('注销失败，请稍后再试');
          }
        });
      });
    }
  },
  mounted() {
    var goods = localStorage.getItem('goodsXq');
    if (goods) {
      this.product = JSON.parse(goods);
      console.log("product=", goods);
    }
    var user = localStorage.getItem('user');
    if (user) {
      this.user = JSON.parse(user);
      this.userId = this.user.id;
      console.log("uid=", this.userId);
    }
  },
};
</script>

<style>
#dd1 {
  text-align: left;
  font-size: 18px;
}

.el-card {
  margin-bottom: 20px;
}

.el-card__header {
  font-size: 18px;
  font-weight: bold;
}

.van-cell__title {
  font-size: 16px;
}

.van-cell__value {
  font-size: 16px;
}
</style>

